<template>
	<view class="setting_page">
		<view class="box">
			<view class="box_item">
				<view class="title">头像</view>
				<image :src="user_info.avatar" @click="upAvatar()"></image>
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
			<view class="box_item">
				<view class="title">昵称</view>
				<view style="display: flex;">
					<view style="font-size: 32rpx;color: #666666;line-height: 48rpx;" @click="show=!show">
						{{user_info.nickname}}</view>
					<u-icon name="arrow-right" size="20"></u-icon>
				</view>
			</view>
		</view>
		<view class="tips">
			<view style="font: size 32rpx;">订单通知</view>
			<u-switch v-model="value" activeColor="#00CC7B"></u-switch>
		</view>
		<view class="box" style="margin-top: 20rpx;">
			<view class="box_item">
				<view class="title">个人实名认证</view>
				<u-icon name="arrow-right" size="20" @click="toRenZheng()"></u-icon>
			</view>
			<view class="box_item">
				<view class="title">手机账号</view>
				<view style="font-size: 32rpx;color: #666666;line-height: 48rpx;">{{user_info.mobile}}</view>
				<u-icon name="arrow-right" size="20" @click="toPhone()"></u-icon>
			</view>
			<view class="box_item">
				<view class="title">修改登录密码</view>
				<u-icon name="arrow-right" size="20" @click="toResetPwd()"></u-icon>
			</view>
		</view>
		<u-popup :show="show" mode="center" round="12" @close="close" closeOnClickOverlay>
			<view class="pop_box">
				<view class="pop_title">填写昵称</view>
				<input class="pop_ipt" placeholder="请填写昵称" v-model="name" />
				<view class="btns">
					<view @click="show=false">取消</view>
					<view style="background-color: #00CC7B;color: #FFFFFF;" @click="confirmName()">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		resetInfo,
		userInfo
	} from "../../api/index.js"
	export default {
		data() {
			return {
				show: false,
				value: false,
				name: '',
				avatar: '',
				user_info: []
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				userInfo().then(res => {
					this.user_info = res.data
					this.avatar=res.data.avatar
					console.log(res);
				})
			},
			close() {
				this.show = false
			},
			confirmName() {
				if (this.name == '') {
					uni.showToast({
						icon: 'error',
						title: '昵称不能为空'
					})
				} else {
					resetInfo({
						nickname: this.name,
						avatar: this.avatar
					}).then(res => {
						this.getInfo()
						uni.showToast({
							icon: 'success',
							title: '修改成功'
						})
						this.name=''
					})
					this.show = false
				}
			},
			upAvatar() {
				uni.chooseImage({
					count: 1,
					success: res => {
						uni.uploadFile({
							url: 'https://xiaoan.lf520.vip/api/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								token: uni.getStorageSync('tokenVal')
							},
							success: result => {
								let p = JSON.parse(result.data)
								this.avatar = p.data.fullurl
								resetInfo({
									nickname: '',
									avatar: this.avatar
								}).then(res => {
									this.getInfo()
									uni.showToast({
										icon: 'success',
										title: '修改成功'
									})
									
								})
							}
						})
					}
				})
			},
			toRenZheng() {
				uni.navigateTo({
					url: "/pages/my/renzheng"
				})
			},
			toPhone() {
				uni.navigateTo({
					url: "/pages/my/phone"
				})
			},
			toResetPwd() {
				uni.navigateTo({
					url: '/pages/my/resetpwd'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.setting_page {
		width: 100%;
		height: 90vh;
		background-color: #F9F9F9;

		.box {
			width: 100%;
			height: 224rpx;

			.box_item {
				padding: 32rpx;
				width: 100%;
				height: 112rpx;
				display: flex;
				background-color: #ffffff;
				justify-content: space-between;
				image {
					width: 60rpx;
					height: 60rpx;
					transform: translateY(-6rpx);
					border-radius: 100%;
				}

				.title {
					width: 80%;
					line-height: 48rpx;
					font-size: 32rpx;
				}
			}
		}

		.tips {
			width: 100%;
			height: 112rpx;
			margin-top: 20rpx;
			background-color: #ffffff;
			padding: 32rpx;
			display: flex;
			justify-content: space-between;
		}
	}

	.pop_box {
		width: 630rpx;
		height: 320rpx;
		padding: 32rpx 60rpx;
		background-color: #ffffff;
		border-radius: 12rpx;

		.pop_title {
			width: 100%;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			text-align: center;
		}

		.pop_ipt {
			width: 100%;
			height: 64rpx;
			background-color: #EEEEEE;
			border-radius: 80rpx;
			margin-top: 32rpx;
			padding: 0rpx 32rpx;
		}

		.btns {
			width: 100%;
			height: 64rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 48rpx;

			view {
				width: 224rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				border-radius: 134rpx;
				font-size: 32rpx;
				background-color: #ffffff;
				color: #999999;
				border: 2rpx #DDDDDD solid;
			}
		}
	}
</style>